<script lang="ts" setup name="resolution">
const props = defineProps(['resolution'])
const emits = defineEmits(['close', 'submit'])
const show = ref<boolean>(false)
const dataForm = ref<any>({
	w: undefined,
	h: undefined
})

let _rate = 1

const close = () => {
	emits('close')
}

const submit = () => {
	emits('submit',dataForm.value)
}

const handleResolutionInput = (mark: string, value: number) => {
	console.log(mark,value)
	if (mark == 'w') {
		//w改变，同步获取h
		dataForm.value.h = Math.floor(value / _rate)
	} else {
		//h改变，同步获取w
		dataForm.value.w = Math.floor(value * _rate)
	}
}

onMounted(() => {
	const { w, h } = props.resolution ?? {}
	if (!w || !h) return
	_rate = w / h
	dataForm.value.w = w
	dataForm.value.h = h
})

show.value = true
</script>
<template>
	<el-dialog v-model="show" title="修改图像像素" width="500" :before-close="close">
		<el-form :model="dataForm" label-width="auto" style="max-width: 600px">
			<el-form-item label="宽度">
				<el-input v-model="dataForm.w" placeholder="请输入图像宽度" onkeyup="value=value.replace(/^0+/g, '').replace(/[^\d]/g,'')" @input="(e: any) => { handleResolutionInput('w', e) }" />
			</el-form-item>
			<el-form-item label="高度">
				<el-input v-model="dataForm.h" placeholder="请输入图像高度" onkeyup="value=value.replace(/^0+/g, '').replace(/[^\d]/g,'')" @input="(e: any) => { handleResolutionInput('h', e) }" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="close">取消</el-button>
				<el-button type="primary" @click="submit"> 确认 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="scss"></script>
